<template>
  <header class="p-3 text-white">
    <div class="container">
      <div
        class="
          d-flex
          flex-wrap
          align-items-center
          justify-content-center justify-content-lg-start
        "
      >
        <ul
          class="
            nav
            col-12 col-lg-auto
            me-lg-auto
            mb-2
            justify-content-center
            mb-md-0
          "
        >
          <!-- <li>
            <router-link :to="{ path: '/' }" class="nav-link px-2 text-white"
              >Home</router-link
            >
          </li> -->
          <li>
            <router-link :to="{ path: '/governmentHome' }" class="nav-link px-2 text-white"
              >首页</router-link
            >
          </li>
          <li>
            <router-link
              :to="{ path: '/governmentHangqing' }"
              class="nav-link px-2 text-white"
              >价格行情</router-link
            >
          </li>
          <li>
            <router-link
              :to="{ path: '/governmentNyyw' }"
              class="nav-link px-2 text-white"
              >农业要闻</router-link
            >
          </li>
          <li><a href="#" class="nav-link px-2 text-white">我的看板</a></li>
        </ul>

        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
          <input
            type="search"
            class="form-control form-control-dark"
            placeholder="Search..."
            aria-label="Search"
          />
        </form>

        <div class="text-end">
          <button type="button" class="btn btn-outline-light me-2">
            Login
          </button>
          <button type="button" class="btn btn-warning me-2">Sign-up</button>
        </div>

        <div class="dropdown text-end">
          <a
            href="#"
            class="d-block link-dark text-decoration-none dropdown-toggle"
            id="dropdownUser1"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            <img
              src="../../../static/img/logo.jpg"
              alt="mdo"
              width="32"
              height="32"
              class="rounded-circle"
            />
          </a>
          <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
            <li><a class="dropdown-item" href="#">New project...</a></li>
            <li><a class="dropdown-item" href="#">Settings</a></li>
            <li><a class="dropdown-item" href="#">Profile</a></li>
            <li>
              <hr class="dropdown-divider" />
            </li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: "productsDataDisplay",
  data() {
    return {
      msg: "Dashboard",
      cate: "",
    };
  },
  created() {
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "../../../static/js/bootstrap-bundle-min.js";
    document.body.appendChild(s);
  },
};
</script>

<style scoped>
header {
  background-color: #2c7d72;
}
</style>
